<template>
  <div class="detail">
    <HmHeard :isShow="true" @back="back">
      <template #center>文章详情</template>
      <template #right>🔍</template>
    </HmHeard>
    <div class="item">
      <h1>{{ obj.stem }}</h1>
      <div class="info">
        <span>{{ obj.createdAt }}</span>
        <span> |</span>
        <span>{{ obj.views }} 浏览量</span>
        <span> |</span>
        <span>{{ obj.likeCount }} 点赞数</span>
      </div>
      <div class="user">
        <img :src="obj.creatorAvatar" /><span>{{ obj.creatorName }}</span>
      </div>
      <div class="content">{{ obj.content }}</div>
    </div>
  </div>
</template>

<script>
import axios from "axios";
import HmHeard from "@/components/HmHeard.vue";
export default {
  name: "HmDetail",
  components: {
    HmHeard,
  },
  data() {
    return {
      obj: {},
    };
  },
  created() {
    const id = this.$route.query.id;
    this.getDetail(id);
  },
  methods: {
    async getDetail(id) {
      if (!id) return;
      const res = await axios({
        url: `https://mock.boxuegu.com/mock/3083/articles/${id}`,
      });
      this.obj = res.data.result;
      // console.log(res.data.result);
    },
    back() {
      this.$router.back();
    },
  },
};
</script>

<style scoped lang="less">
.detail {
  width: 100%;
  height: 100%;

  .item {
    font-style: 16px;
    padding: 15px;
    .content {
      text-indent: 2em;
    }
    .user {
      height: 50px;
      display: flex;
      align-items: center;

      img {
        width: 30px;
        height: 30px;
      }
    }
  }
}
</style>
